<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
    <title>Multi-Touch</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>

    <style type="text/css">
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        svg {
            width: 100%;
            height: 100%;
        }

        circle {
            fill: none;
            stroke: steelblue;
        }

        .arc {
            fill: steelblue;
            stroke: none;
        }
    </style>
</head>

<body>

<script type="text/javascript">
    var initR = 100, 
        r = 400, 
        thickness = 20;

    var svg = d3.select("body")
            .append("svg");

    d3.select("body") // <-A
            .on("touchstart", touch)
            .on("touchend", touch);

    function touch() {
        d3.event.preventDefault(); // <-B

        var arc = d3.arc()
                .outerRadius(initR)
                .innerRadius(initR - thickness);

        var g = svg.selectAll("g.touch") // <-C
                .data(d3.touches(svg.node()), function (d, i) {
                    return i;
                });

        g.enter()
            .append("g")
            .attr("class", "touch")
            .attr("transform", function (d) {
                return "translate(" + d[0] + "," + d[1] + ")";
            })
            .append("path")
                .attr("class", "arc")
                .transition().duration(2000).ease(d3.easeLinear)
                .attrTween("d", function (d) { // <-D
                    var interpolate = d3.interpolate(
                            {startAngle: 0, endAngle: 0},
                            {startAngle: 0, endAngle: 2 * Math.PI}
                        );
                    return function (t) {
                        return arc(interpolate(t));
                    };
                })
                .on("end", function (d) {
                    if (complete(d)) // <-E
                        ripples(d);
                    g.remove();
                });

        g.exit().remove().each(function (d) {
            console.log("Animation stopped");
            d[2] = "stopped"; // <-F
        });
    }

    function complete(d) {
        console.log("Animation completed? " + (d.length < 3));
        return d.length < 3;
    }

    function ripples(position) {
        console.log("Producing ripple effect...");

        for (var i = 1; i < 5; ++i) {
            var circle = svg.append("circle")
                    .attr("cx", position[0])
                    .attr("cy", position[1])
                    .attr("r", initR - (thickness / 2))
                    .style("stroke-width", thickness / (i))
                .transition()
                    .delay(Math.pow(i, 2.5) * 50)
                    .duration(2000).ease(d3.easeQuadIn)
                    .attr("r", r)
                    .style("stroke-opacity", 0)
                    .on("end", function () {
                        d3.select(this).remove();
                    });
        }
    }
</script>

</body>

</html>